import React, {Component} from 'react';
import {Link} from 'react-router';
import {Icon} from 'antd';
import myVideo from '../../static/video.mp4';
import logo from '../../static/logo.png'
import './index.less';

class Home extends Component {

    constructor(props) {
        super(props);
        this.static = {
            refs: {},
            videoPaused: false,
        };
        this.onVideoRef = this.onRef.bind(this, 'video');
    }

    componentDidMount() {
        this.onPlayChange(true);
    }

    onRef(name, ref) {
        this.static.refs[name] = ref;
    }

    onPlayChange = (paused) => {
        var videoPaused = typeof paused === 'boolean' ? paused : !this.static.videoPaused;
        if (videoPaused) {
            this.static.refs.video.play();
        } else {
            this.static.refs.video.pause();
        }
        this.static.videoPaused = videoPaused;
    }

    render() {
        return (
            <div className="fullscreen">
                <div className="fullscreen flex-v">
                    <div className="nav cf">
                        <img className="logo" src={logo}/>
                        <ul className="menu cf">
                            <li className="menu-item">热门赛事</li>
                            <li className="menu-item">热门赛程</li>
                            <li className="menu-item">登录/注册</li>
                            <li className="menu-item"><Icon type="bars"/></li>
                        </ul>
                    </div>
                    <div className="bg-video">
                        <video ref={this.onVideoRef} src={myVideo} />
                    </div>
                    <div className="mask" onClick={this.onPlayChange}></div>
                    <div className="down-icon">
                        <Icon type="down-circle-o" />
                    </div>
                </div>
            </div>
        );
    }
}

export default Home;
